<template>
    <div>
        <h1 style="text-align: left;">员工五险一金缴纳基数</h1><br>
        
        <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="true" style="display: flex; flex-direction: column; gap: 16px; text-align: left;">
            
            <el-form-item label="">
                
                <el-row :gutter="20" style="width: 100%;">
                    <el-col :span="12" :offset="0">
                        <span>员工姓名</span>
                        <el-select 
                            v-model="formData.emp"
                            placeholder="请选择员工姓名"
                            clearable
                        >
                            <el-option 
                                v-for="emp in employeeList" 
                                :key="emp.id" 
                                :label="emp.employeeName" 
                                :value="emp.employeeId"
                            ></el-option>
                        </el-select>
                        <span>养老保险个人缴纳部分</span>
                        <el-input v-model="formData.pensionInsuranceIndividual"></el-input>
                        <span>医疗保险个人缴纳部分</span>
                        <el-input v-model="formData.healthInsuranceIndividual"></el-input>
                        <span>失业保险个人缴纳部分</span>
                        <el-input v-model="formData.unemploymentInsuranceIndividual"></el-input>
                        <span>生育保险单位缴纳部分</span>
                        <el-input v-model="formData.maternityInsuranceUnit"></el-input>
                        <span>住房公积金个人缴纳部分</span>
                        <el-input v-model="formData.housingProvidentIndividual"></el-input>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <span>养老保险单位缴纳部分</span>
                        <el-input v-model="formData.pensionInsuranceUnit"></el-input>
                        <span>医疗保险单位缴纳部分</span>
                        <el-input v-model="formData.healthInsuranceUnit"></el-input>
                        <span>失业保险单位缴纳部分</span>
                        <el-input v-model="formData.unemploymentInsuranceUnit"></el-input>
                        <span>工伤保险单位缴纳部分</span>
                        <el-input v-model="formData.compensationInsuranceUnit"></el-input>
                        <span>住房公积金单位缴纳部分</span>
                        <el-input v-model="formData.housingProvidentUnit"></el-input>
                    </el-col>                       
                </el-row>
                
                                
            </el-form-item>
            <el-form-item  style="margin-top: auto; align-self: flex-start;">
                <el-button type="primary" @click="onSubmit">提交</el-button>
                
            </el-form-item>
        </el-form>
        
        
    </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import request from '@/api/request.js';
import { ElMessage } from 'element-plus';

let emits = defineEmits(['ref-table']);
let formData = ref({
     // 存储员工ID
});

// 提交表单处理函数
const onSubmit = async () => {
     
    // 验证是否选择了员工
    if (!formData.value.emp) {
        ElMessage.warning('请先选择员工');
        return;
    }

    try {
        // 先查询该员工是否已有数据
        const checkRes = await request({
            url: '/salary/setup/risks/ba',
            method: 'get',
            params: {
                emp:formData.value.emp // 将员工ID传入查询接口
            }
        });

        // 检查是否已有数据（根据实际接口返回格式调整判断条件）
        if (checkRes.data && (checkRes.data.length > 0 || Object.keys(checkRes.data).length > 0)) {
            ElMessage.warning('该员工的五险一金数据已存在');
            return;
        }

        // 没有数据则执行添加操作
        const res = await request({
            url: '/salary/setup/risks/insert',
            method: 'post',
            data: formData.value
        });

        ElMessage.success('提交成功');
        emits('ref-table'); // 刷新列表
        // 重置表单
        formData.value = {
            empId: null
        };
    } catch (error) {
        console.error('操作失败:', error);
        ElMessage.error('操作失败，请重试');
    }
};

let employeeList = ref([]);

onMounted(() => {
    findEmployees();
});

// 获取员工列表
let findEmployees = () => {
    request({
        url: '/emp',
        method: 'get'
    }).then(res => {
        if (res.data) {
            employeeList.value = res.data;
        }
    }).catch(error => {
        console.error('获取员工列表失败:', error);
        ElMessage.error('获取员工列表失败');
    });
};
</script>

<style scoped>

</style>
